Batas Kesalahan TypeScript: Pola Tipe Penanganan Kesalahan untuk Aplikasi yang Tangguh

Dalam dunia pengembangan perangkat lunak, kesalahan yang tidak terduga tidak dapat dihindari. Mulai dari gangguan jaringan hingga format data yang tidak terduga, aplikasi harus siap menangani situasi ini dengan baik. TypeScript, dengan sistem tipenya yang kuat, menawarkan kerangka kerja yang tangguh untuk membangun aplikasi yang ulet. Artikel ini membahas konsep batas kesalahan TypeScript, menjelajahi berbagai pola tipe penanganan kesalahan, praktik terbaik, dan contoh dunia nyata untuk membekali Anda dengan pengetahuan untuk membuat kode yang lebih stabil dan dapat dipelihara.

Memahami Pentingnya Penanganan Kesalahan

Penanganan kesalahan yang efektif sangat penting untuk pengalaman pengguna yang positif dan kesehatan aplikasi secara keseluruhan. Ketika kesalahan tidak ditangani, hal itu dapat menyebabkan:

• Kerusakan dan Perilaku Tak Terduga: Pengecualian yang tidak tertangkap dapat menghentikan eksekusi kode Anda, yang menyebabkan kerusakan atau hasil yang tidak dapat diprediksi.
• Kehilangan dan Kerusakan Data: Kesalahan selama pemrosesan atau penyimpanan data dapat mengakibatkan kehilangan atau kerusakan data, yang berdampak pada pengguna dan integritas sistem.
• Kerentanan Keamanan: Penanganan kesalahan yang buruk dapat mengekspos informasi sensitif atau menciptakan peluang untuk serangan jahat.
• Pengalaman Pengguna yang Negatif: Pengguna yang menemukan pesan kesalahan yang samar atau kegagalan aplikasi kemungkinan akan memiliki pengalaman yang membuat frustrasi, yang menyebabkan hilangnya kepercayaan dan adopsi.
• Produktivitas yang Berkurang: Pengembang menghabiskan waktu untuk melakukan debugging dan menyelesaikan kesalahan yang tidak tertangani, menghambat produktivitas pengembangan secara keseluruhan dan memperlambat siklus rilis.

Sebaliknya, penanganan kesalahan yang baik menyediakan:

• Degradasi yang Anggun: Aplikasi terus berfungsi, meskipun bagian tertentu mengalami kesalahan.
• Umpan Balik Informatif: Pengguna menerima pesan kesalahan yang jelas dan ringkas, membantu mereka memahami dan menyelesaikan masalah.
• Integritas Data: Operasi penting dikelola secara transaksional, melindungi informasi penting pengguna.
• Stabilitas yang Ditingkatkan: Aplikasi menjadi lebih tangguh terhadap peristiwa tak terduga.
• Pemeliharaan yang Ditingkatkan: Lebih mudah untuk mengidentifikasi, mendiagnosis, dan memperbaiki masalah saat muncul.

Apa itu Batas Kesalahan di TypeScript?

Batas kesalahan adalah pola desain yang digunakan untuk menangkap kesalahan JavaScript dalam bagian tertentu dari pohon komponen dan secara elegan menampilkan antarmuka pengguna cadangan alih-alih merusak seluruh aplikasi. Meskipun TypeScript sendiri tidak memiliki fitur "batas kesalahan" yang spesifik, prinsip dan teknik untuk membuat batasan tersebut mudah diterapkan dan ditingkatkan oleh keamanan tipe TypeScript.

Ide intinya adalah mengisolasi kode yang berpotensi rawan kesalahan di dalam komponen atau modul khusus. Komponen ini bertindak sebagai pembungkus, memantau kode di dalamnya. Jika terjadi kesalahan, komponen batas kesalahan "menangkap" kesalahan tersebut, mencegahnya menyebar ke atas pohon komponen dan berpotensi merusak aplikasi. Sebaliknya, batas kesalahan dapat merender UI cadangan, mencatat kesalahan, atau mencoba memulihkan dari masalah tersebut.

Manfaat menggunakan batas kesalahan adalah:

• Isolasi: Mencegah kesalahan di satu bagian aplikasi Anda memengaruhi bagian lain.
• UI Cadangan: Memberikan pengalaman yang lebih ramah pengguna daripada aplikasi yang rusak total.
• Pencatatan Kesalahan: Memfasilitasi pengumpulan informasi kesalahan untuk debugging dan pemantauan.
• Pemeliharaan yang Ditingkatkan: Menyederhanakan logika penanganan kesalahan dan membuatnya lebih mudah untuk diperbarui dan dipelihara kodenya.

Pola Tipe Penanganan Kesalahan di TypeScript

Sistem tipe TypeScript sangat efektif bila dikombinasikan dengan pola penanganan kesalahan yang tepat. Berikut adalah beberapa pola umum dan efektif untuk mengelola kesalahan dalam aplikasi TypeScript Anda:

1. Blok Try-Catch

Blok bangunan fundamental dari penanganan kesalahan di JavaScript dan TypeScript adalah blok `try-catch`. Ini memungkinkan Anda untuk mengeksekusi kode di dalam blok `try` dan menangkap setiap pengecualian yang dilemparkan. Ini adalah operasi sinkron, ideal untuk menangani kesalahan secara langsung di dalam sebuah fungsi.

            function fetchData(url: string): Promise<any> {
  try {
    return fetch(url).then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    });
  } catch (error) {
    console.error("An error occurred while fetching data:", error);
    // Handle the error (e.g., display an error message to the user)
    return Promise.reject(error);
  }
}
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi `fetchData` mencoba mengambil data dari URL yang diberikan. Jika panggilan `fetch` gagal (misalnya, kesalahan jaringan, URL buruk), atau jika status respons tidak baik, kesalahan akan dilemparkan. Blok `catch` kemudian menangani kesalahan tersebut. Perhatikan penggunaan `Promise.reject(error)` untuk menyebarkan kesalahan, sehingga kode pemanggil juga dapat menanganinya. Ini umum untuk operasi asinkron.

2. Promise dan Penanganan Kesalahan Asinkron

Operasi asinkron umum terjadi di JavaScript, terutama ketika berurusan dengan API, interaksi basis data, dan I/O file. Promise menyediakan mekanisme yang kuat untuk menangani kesalahan dalam skenario ini. Blok `try-catch` berguna, tetapi dalam banyak kasus, Anda akan menangani kesalahan di dalam metode `.then()` dan `.catch()` dari sebuah Promise.

            function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      console.error("An error occurred while fetching data:", error);
      // Handle the error (e.g., display an error message to the user)
      return Promise.reject(error);
    });
}

fetchData('https://api.example.com/data')
  .then(data => {
    console.log("Data fetched successfully:", data);
  })
  .catch(error => {
    console.error("Failed to fetch data:", error);
    // Display a user-friendly error message
  });
            

              
                Copy
              
            
          

Dalam contoh ini, fungsi `fetchData` menggunakan Promise untuk menangani operasi `fetch` yang asinkron. Kesalahan ditangkap di blok `.catch()`, memungkinkan Anda untuk menanganinya secara spesifik untuk operasi asinkron tersebut.

3. Kelas Kesalahan dan Tipe Kesalahan Kustom

TypeScript memungkinkan Anda untuk mendefinisikan kelas kesalahan kustom, memberikan penanganan kesalahan yang lebih terstruktur dan informatif. Ini adalah praktik yang bagus untuk membuat logika penanganan kesalahan yang dapat digunakan kembali dan aman dari segi tipe. Dengan membuat kelas kesalahan kustom, Anda dapat:

• Menambahkan Kode Kesalahan Spesifik: Membedakan antara berbagai jenis kesalahan.
• Memberikan Konteks: Menyimpan data tambahan yang terkait dengan kesalahan.
• Meningkatkan Keterbacaan dan Pemeliharaan: Membuat kode penanganan kesalahan Anda lebih mudah dipahami.

            class ApiError extends Error {
  statusCode: number;
  code: string;

  constructor(message: string, statusCode: number, code: string) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code;
    // Assign the prototype explicitly
    Object.setPrototypeOf(this, ApiError.prototype);
  }
}

async function getUserData(userId: number): Promise<any> {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      let errorMessage = 'Failed to fetch user data';
      if (response.status === 404) {
        errorMessage = 'User not found';
      }
      throw new ApiError(errorMessage, response.status, 'USER_NOT_FOUND');
    }
    return await response.json();
  } catch (error: any) {
    if (error instanceof ApiError) {
      console.error("API Error:", error.message, error.statusCode, error.code);
      // Handle specific API error based on the code
      if (error.code === 'USER_NOT_FOUND') {
        // Show a 'user not found' message
      }
    } else {
      console.error("An unexpected error occurred:", error);
      // Handle other errors
    }
    throw error; // Re-throw or handle the error
  }
}

getUserData(123)
  .then(userData => console.log("User data:", userData))
  .catch(error => console.error("Error retrieving user data:", error));
            

              
                Copy
              
            
          

Contoh ini mendefinisikan kelas `ApiError`, yang mewarisi dari kelas `Error` bawaan. Ini mencakup properti `statusCode` dan `code` untuk memberikan lebih banyak konteks. Fungsi `getUserData` menggunakan kelas kesalahan kustom ini, menangkap dan menangani jenis kesalahan tertentu. Penggunaan operator `instanceof` memungkinkan pemeriksaan yang aman dari segi tipe dan penanganan kesalahan spesifik berdasarkan jenis kesalahan.

4. Tipe `Result` (Penanganan Kesalahan Fungsional)

Pemrograman fungsional sering menggunakan tipe `Result` (juga disebut tipe `Either`) untuk merepresentasikan hasil yang berhasil atau kesalahan. Pola ini menyediakan cara yang bersih dan aman dari segi tipe untuk menangani kesalahan. Tipe `Result` biasanya memiliki dua varian: `Ok` (untuk keberhasilan) dan `Err` (untuk kegagalan).

            
// Define a generic Result type

interface Ok<T> {
    type: 'ok';
    value: T;
}

interface Err<E> {
    type: 'err';
    error: E;
}

type Result<T, E> = Ok<T> | Err<E>

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return { type: 'err', error: 'Division by zero' };
  }
  return { type: 'ok', value: a / b };
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1.type === 'ok') {
  console.log('Result:', result1.value);
} else {
  console.error('Error:', result1.error);
}

if (result2.type === 'ok') {
  console.log('Result:', result2.value);
} else {
  console.error('Error:', result2.error);
}
            

              
                Copy
              
            
          

Fungsi `divide` mengembalikan `Result` dari tipe `Ok` yang berisi hasil pembagian atau `Result` dari tipe `Err` yang berisi pesan kesalahan. Pola ini memastikan bahwa pemanggil dipaksa untuk secara eksplisit menangani skenario keberhasilan dan kegagalan, mencegah kesalahan yang tidak tertangani.

5. Decorator (untuk penanganan kesalahan tingkat lanjut - jarang digunakan secara langsung untuk implementasi batas)

Meskipun bukan pola langsung untuk batas kesalahan, decorator dapat digunakan untuk menerapkan logika penanganan kesalahan ke metode secara deklaratif. Ini dapat mengurangi boilerplate dalam kode Anda. Namun, penggunaan ini kurang umum dibandingkan pola-pola lain di atas untuk implementasi batas kesalahan inti.

            
function handleError(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = async function (...args: any[]) {
    try {
      const result = await originalMethod.apply(this, args);
      return result;
    } catch (error: any) {
      console.error(`Error in ${propertyKey}:`, error);
      // Handle the error here (e.g., log, display a default value, etc.)
      return null; // Or throw a more specific error
    }
  };

  return descriptor;
}

class MyService {
  @handleError
  async fetchData(url: string): Promise<any> {
    // Simulate an error
    if (Math.random() < 0.5) {
      throw new Error('Simulated network error');
    }
    const response = await fetch(url);
    return await response.json();
  }
}

            

              
                Copy
              
            
          

Contoh ini mendefinisikan decorator `@handleError`. Decorator ini membungkus metode asli, menangkap setiap kesalahan dan mencatatnya. Ini memungkinkan penanganan kesalahan tanpa memodifikasi kode metode asli secara langsung.

Menerapkan Batas Kesalahan di Kerangka Kerja Frontend (Contoh React)

Meskipun konsep intinya tetap sama, implementasi batas kesalahan sedikit berbeda tergantung pada kerangka kerja frontend yang Anda gunakan. Mari kita fokus pada React, kerangka kerja yang paling umum untuk membangun antarmuka pengguna interaktif.

Batas Kesalahan React

React menyediakan mekanisme khusus untuk membuat batas kesalahan. Batas kesalahan adalah komponen React yang menangkap kesalahan JavaScript di mana saja di dalam pohon komponen turunannya, mencatat kesalahan tersebut, dan menampilkan UI cadangan alih-alih merusak seluruh aplikasi. Batas kesalahan menangkap kesalahan selama rendering, metode siklus hidup, dan konstruktor dari semua komponen turunannya.

Metode kunci untuk membuat batas kesalahan di React:

• `static getDerivedStateFromError(error)`: Metode statis ini dipanggil setelah komponen turunan melemparkan kesalahan. Metode ini menerima kesalahan sebagai parameter dan harus mengembalikan objek untuk memperbarui state. Ini digunakan untuk memperbarui state, seperti mengatur flag `error` menjadi `true` untuk memicu UI cadangan.
• `componentDidCatch(error, info)`: Metode ini dipanggil setelah kesalahan dilemparkan oleh komponen turunan. Metode ini menerima kesalahan dan objek yang berisi informasi tentang komponen yang melemparkan kesalahan. Biasanya digunakan untuk mencatat kesalahan. Metode ini hanya dipanggil untuk kesalahan yang terjadi selama render turunannya.

            import React from 'react';

interface Props {
    children: React.ReactNode;
}

interface State {
    hasError: boolean;
    error: Error | null;
}

class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // You can also log the error to an error reporting service
    console.error('Uncaught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div className="error-boundary">
          <h2>Something went wrong.</h2>
          <p>We're working on fixing it!</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.stack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Komponen `ErrorBoundary` ini membungkus komponen turunannya. Jika ada kesalahan yang dilemparkan di dalam komponen yang dibungkus, metode `getDerivedStateFromError` akan dipanggil untuk memperbarui state, menyebabkan komponen dirender ulang dengan UI cadangan. Metode `componentDidCatch` digunakan untuk pencatatan kesalahan. Untuk menggunakan ErrorBoundary, Anda cukup membungkus bagian aplikasi Anda di dalamnya:

            
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponentThatMightError />
      </ErrorBoundary>
      <AnotherComponent />
    </div>
  );
}

            

              
                Copy
              
            
          

Dengan menempatkan komponen `ErrorBoundary` di sekitar komponen yang berpotensi bermasalah, Anda mengisolasi komponen tersebut dan menyediakan UI cadangan jika terjadi kesalahan, mencegah seluruh aplikasi rusak.

Batas Kesalahan di Kerangka Kerja Lain (Konseptual)

Meskipun detail implementasinya berbeda, prinsip inti batas kesalahan dapat diterapkan pada kerangka kerja frontend lain seperti Angular dan Vue.js. Anda biasanya akan mencapainya menggunakan strategi serupa:

• Angular: Menggunakan penanganan kesalahan komponen, penangan kesalahan kustom, dan interceptor. Pertimbangkan untuk menggunakan kelas `ErrorHandler` Angular dan membungkus komponen yang berpotensi bermasalah dengan logika penanganan kesalahan.
• Vue.js: Menggunakan blok `try...catch` di dalam komponen atau menggunakan penangan kesalahan global yang didaftarkan melalui `Vue.config.errorHandler`. Vue juga memiliki fitur untuk penanganan kesalahan tingkat komponen yang mirip dengan batas kesalahan React.

Praktik Terbaik untuk Batas Kesalahan dan Penanganan Kesalahan

Untuk memanfaatkan batas kesalahan dan pola tipe penanganan kesalahan secara efektif, pertimbangkan praktik terbaik berikut:

• Isolasi Kode yang Rawan Kesalahan: Bungkus komponen atau bagian kode yang kemungkinan besar akan melemparkan kesalahan di dalam batas kesalahan atau konstruksi penanganan kesalahan yang sesuai.
• Berikan Pesan Kesalahan yang Jelas: Rancang pesan kesalahan yang ramah pengguna yang memberikan konteks dan panduan bagi pengguna. Hindari jargon yang samar atau teknis.
• Catat Kesalahan Secara Efektif: Terapkan sistem pencatatan kesalahan yang kuat untuk melacak kesalahan, mengumpulkan informasi yang relevan (jejak tumpukan, konteks pengguna, dll.), dan memfasilitasi debugging. Gunakan layanan seperti Sentry, Bugsnag, atau Rollbar untuk lingkungan produksi.
• Terapkan UI Cadangan: Sediakan UI cadangan yang bermakna yang menangani kesalahan dengan baik dan mencegah seluruh aplikasi rusak. Cadangan harus memberi tahu pengguna tentang apa yang terjadi dan, jika sesuai, menyarankan tindakan yang dapat mereka ambil.
• Gunakan Kelas Kesalahan Kustom: Buat kelas kesalahan kustom untuk merepresentasikan berbagai jenis kesalahan dan menambahkan konteks dan informasi tambahan untuk penanganan kesalahan yang lebih efektif.
• Pertimbangkan Ruang Lingkup Batas Kesalahan: Jangan membungkus seluruh aplikasi dalam satu batas kesalahan tunggal, karena dapat menyembunyikan masalah yang mendasarinya. Sebaliknya, tempatkan batas kesalahan secara strategis di sekitar komponen atau bagian aplikasi.
• Uji Penanganan Kesalahan: Tulis pengujian unit dan pengujian integrasi untuk memastikan logika penanganan kesalahan Anda berfungsi seperti yang diharapkan dan UI cadangan ditampilkan dengan benar. Uji untuk skenario di mana kesalahan mungkin terjadi.
• Pantau dan Analisis Kesalahan: Pantau secara teratur log kesalahan aplikasi Anda untuk mengidentifikasi masalah yang berulang, melacak tren kesalahan, dan mengidentifikasi area untuk perbaikan.
• Berusaha untuk Validasi Data: Validasi data yang diterima dari sumber eksternal untuk mencegah kesalahan tak terduga yang disebabkan oleh format data yang salah.
• Tangani Promise dan Operasi Asinkron dengan Hati-hati: Pastikan Anda menangani kesalahan yang dapat terjadi dalam operasi asinkron menggunakan blok `.catch()` atau mekanisme penanganan kesalahan yang sesuai.

Contoh Dunia Nyata dan Pertimbangan Internasional

Mari kita jelajahi beberapa contoh praktis tentang bagaimana batas kesalahan dan pola tipe penanganan kesalahan dapat diterapkan dalam skenario dunia nyata, dengan mempertimbangkan internasionalisasi:

Contoh: Aplikasi E-commerce (Pengambilan Data)

Bayangkan sebuah aplikasi e-commerce yang menampilkan daftar produk. Aplikasi ini mengambil data produk dari API backend. Batas kesalahan digunakan untuk menangani potensi masalah dengan panggilan API.

            
interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
  // ... other product details
}

class ProductList extends React.Component<{}, { products: Product[] | null; loading: boolean; error: Error | null }> {
  state = { products: null, loading: true, error: null };

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      this.setState({ products, loading: false });
    } catch (error: any) {
      this.setState({ error, loading: false });
    }
  }

  async fetchProducts(): Promise<Product[]> {
    const response = await fetch('/api/products'); // API endpoint
    if (!response.ok) {
      throw new Error(`Failed to fetch products: ${response.status}`);
    }
    return await response.json();
  }

  render() {
    const { products, loading, error } = this.state;

    if (loading) {
      return <div>Loading products...</div>;
    }

    if (error) {
      return (
        <div className="error-message">
          <p>Sorry, we're having trouble loading the products.</p>
          <p>Please try again later.</p>
          <p>Error details: {error.message}</p> {/* Log the error message for debugging */}
        </div>
      );
    }

    return (
      <ul>
        {products && products.map(product => (
          <li key={product.id}>{product.name} - {product.price} {product.currency}</li>
        ))}
      </ul>
    );
  }
}

// Error Boundary (React Component)
class ProductListErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
    constructor(props: any) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true, error: error };
    }

    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
      // You can also log the error to an error reporting service
      console.error('Product List Error:', error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Render a fallback UI (e.g., error message, retry button)
        return (
          <div className="product-list-error">
            <h2>Oops, something went wrong!</h2>
            <p>We are unable to load product information at this time.</p>
            <button onClick={() => window.location.reload()} >Retry</button>
          </div>
        );
      }
      return this.props.children;
    }
}

// Usage
function App() {
  return (
    <div>
      <ProductListErrorBoundary>
        <ProductList />
      </ProductListErrorBoundary>
    </div>
  );
}


            

              
                Copy
              
            
          

Dalam contoh ini:

• `ProductList` mengambil data produk. Ini menangani state pemuatan, data produk yang berhasil, dan state kesalahan di dalam komponen.
• `ProductListErrorBoundary` digunakan untuk membungkus komponen `ProductList` untuk menangkap kesalahan selama rendering dan panggilan API.
• Jika permintaan API gagal, `ProductListErrorBoundary` akan merender pesan kesalahan yang ramah pengguna alih-alih merusak UI.
• Pesan kesalahan memberikan opsi “coba lagi” yang memungkinkan pengguna untuk menyegarkan halaman.
• Bidang `currency` dalam data produk dapat ditampilkan dengan benar dengan menggunakan pustaka internasionalisasi (misalnya, Intl di JavaScript), yang menyediakan pemformatan mata uang sesuai dengan pengaturan lokal pengguna.

Contoh: Validasi Formulir Internasional

Pertimbangkan formulir yang mengumpulkan data pengguna, termasuk informasi alamat. Validasi yang tepat sangat penting, terutama ketika berhadapan dengan pengguna dari berbagai negara dengan format alamat yang berbeda.

            
// Assume a simplified address interface
interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

class AddressForm extends React.Component<{}, { address: Address; errors: { [key: string]: string } }> {
  state = {
    address: {
      street: '',
      city: '',
      postalCode: '',
      country: 'US', // Default country
    },
    errors: {},
  };

  handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = event.target;
    this.setState((prevState) => ({
      address: {
        ...prevState.address,
        [name]: value,
      },
      errors: {
        ...prevState.errors,
        [name]: '', // Clear any previous errors for this field
      },
    }));
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { address } = this.state;
    const errors = this.validateAddress(address);
    if (Object.keys(errors).length > 0) {
      this.setState({ errors });
    }
    else {
      // Submit the form (e.g., to an API)
      alert('Form submitted!'); // Replace with actual submission logic
    }
  };

  validateAddress = (address: Address) => {
    const errors: { [key: string]: string } = {};

    // Validation rules based on the selected country
    if (!address.street) {
      errors.street = 'Street address is required';
    }
    if (!address.city) {
      errors.city = 'City is required';
    }

    // Example: postal code validation based on the country
    switch (address.country) {
      case 'US':
        if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid US postal code';
        }
        break;
      case 'CA':
        if (!/^[A-Za-z][0-9][A-Za-z][ ]?[0-9][A-Za-z][0-9]$/.test(address.postalCode)) {
          errors.postalCode = 'Invalid Canadian postal code';
        }
        break;
      // Add more countries and validation rules
      default:
        if (!address.postalCode) {
          errors.postalCode = 'Postal code is required';
        }
        break;
    }

    return errors;
  };

  render() {
    const { address, errors } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          id="street"
          name="street"
          value={address.street}
          onChange={this.handleChange}
        />
        {errors.street && <div className="error">{errors.street}</div>}

        <label htmlFor="city">City:</label>
        <input
          type="text"
          id="city"
          name="city"
          value={address.city}
          onChange={this.handleChange}
        />
        {errors.city && <div className="error">{errors.city}</div>}

        <label htmlFor="postalCode">Postal Code:</label>
        <input
          type="text"
          id="postalCode"
          name="postalCode"
          value={address.postalCode}
          onChange={this.handleChange}
        />
        {errors.postalCode && <div className="error">{errors.postalCode}</div>}

        <label htmlFor="country">Country:</label>
        <select
          id="country"
          name="country"
          value={address.country}
          onChange={this.handleChange}
        >
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <!-- Add more countries -->
        </select>

        <button type="submit">Submit</button>
      </form>
    );
  }
}


            

              
                Copy
              
            
          

Dalam contoh ini:

• Komponen `AddressForm` mengelola data formulir dan logika validasi.
• Fungsi `validateAddress` melakukan validasi berdasarkan negara yang dipilih.
• Aturan validasi kode pos spesifik negara diterapkan (ditunjukkan untuk AS dan CA).
• Aplikasi menggunakan API `Intl` untuk pemformatan yang sadar lokal. Ini akan digunakan untuk memformat angka, tanggal, dan mata uang secara dinamis sesuai dengan lokal pengguna saat ini.
• Pesan kesalahan dapat diterjemahkan untuk memberikan pengalaman pengguna yang lebih baik secara global.
• Pendekatan ini memungkinkan pengguna untuk mengisi formulir dengan cara yang ramah pengguna, terlepas dari lokasi mereka.

Praktik Terbaik Internasionalisasi:

• Gunakan Pustaka Lokalisasi: Pustaka seperti i18next, react-intl, atau LinguiJS menyediakan fitur untuk menerjemahkan teks, memformat tanggal, angka, dan mata uang berdasarkan lokal pengguna.
• Sediakan Pilihan Lokal: Izinkan pengguna untuk memilih bahasa dan wilayah pilihan mereka. Ini bisa melalui dropdown, pengaturan, atau deteksi otomatis berdasarkan pengaturan browser.
• Tangani Format Tanggal, Waktu, dan Angka: Gunakan API `Intl` untuk memformat tanggal, waktu, angka, dan mata uang dengan tepat untuk berbagai lokal.
• Pertimbangkan Arah Teks: Rancang UI Anda untuk mendukung arah teks kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL). Terdapat pustaka untuk membantu dukungan RTL.
• Perhitungkan Perbedaan Budaya: Perhatikan norma-norma budaya saat merancang UI dan pesan kesalahan Anda. Hindari menggunakan bahasa atau citra yang mungkin menyinggung atau tidak pantas dalam budaya tertentu.
• Uji di Berbagai Lokal: Uji aplikasi Anda secara menyeluruh di berbagai lokal untuk memastikan bahwa terjemahan dan pemformatan berfungsi dengan benar dan UI ditampilkan dengan baik.

Kesimpulan

Batas kesalahan TypeScript dan pola tipe penanganan kesalahan yang efektif adalah komponen penting dalam membangun aplikasi yang andal dan ramah pengguna. Dengan menerapkan praktik-praktik ini, Anda dapat mencegah kerusakan tak terduga, meningkatkan pengalaman pengguna, dan menyederhanakan proses debugging dan pemeliharaan. Dari blok `try-catch` dasar hingga tipe `Result` yang lebih canggih dan kelas kesalahan kustom, pola-pola ini memberdayakan Anda untuk membuat aplikasi yang tangguh yang dapat menahan tantangan dunia nyata. Dengan menerapkan teknik-teknik ini, Anda akan menulis kode TypeScript yang lebih baik, dan memberikan pengalaman yang lebih baik kepada pengguna global Anda.

Ingatlah untuk memilih pola penanganan kesalahan yang paling sesuai dengan kebutuhan proyek Anda dan kompleksitas aplikasi Anda. Selalu fokus pada penyediaan pesan kesalahan yang jelas dan informatif serta UI cadangan yang membimbing pengguna melalui setiap potensi masalah. Dengan mengikuti panduan ini, Anda dapat membuat aplikasi yang lebih tangguh, dapat dipelihara, dan pada akhirnya, berhasil di pasar global.

Pertimbangkan untuk bereksperimen dengan pola dan teknik ini dalam proyek Anda, dan sesuaikan dengan kebutuhan spesifik aplikasi Anda. Pendekatan ini akan berkontribusi pada kualitas kode yang lebih baik dan pengalaman yang lebih positif bagi semua pengguna.